<template>
  <el-container>
    <el-header></el-header>
    <el-main style="margin-top: 140px">
      <el-container>
        <el-aside width="50%" style="min-width: 279px">
          <img src="src/assets/Afterimg/logo.png" alt="">
          <p style="text-align: left;width: 279px;margin: auto;color: rgb(31 149 221);font-size: 14px">
            1-便捷管理，数据安全
            <br>
            2-云游四方，首选途乐行
            <br>
            3-旅游信息，一览无余
          </p>
        </el-aside>
        <el-main>
          <div>
          <el-form inline :rules="loginRule" ref="loginForm" :model="admin">
            <el-form-item label="账号" prop="account">
              <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
              <el-input v-model="admin.account" clearable></el-input>
            </el-form-item>
            <br>
            <el-form-item label="密码" prop="password">
              <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
              <el-input v-model="admin.password" show-password clearable></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="login">登录</el-button>
        </div>
        </el-main>
      </el-container>
    </el-main>
    <el-footer style="height: 300px">
      <p style="color:#DCDCDC;font-size: 13px">
        lily@2021 www.910wsy.com
      </p>
     </el-footer>
  </el-container>

</template>

<script>
export default {
  name: "admin",
  data(){
    return{
      admin:{},
      loginRule:{
        account:[
          {required:true,message: '请输入账号', trigger: 'blur'},
        ],
        password:[
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    login(){
      this.$refs.loginForm.validate((r) => {
        if (r) {
          this.$axios.post("/api/customer/admin", this.admin).then(res => {
            console.log(res);
            if (res.data.status === 1) {
              localStorage.setItem("TOKEN", res.data.data.token);
              this.$router.push("/adminHome");
            }else {
              this.$message.warning(res.data.msg);
            }
          })
        } else {
          this.$message.error('请填写完整信息');
        }
      })
    }
  }
}
</script>

<style scoped>
.el-footer{
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-image: linear-gradient( #48D4F4,#003d99);
}
.el-header{
  background-image: linear-gradient(#003d99, #48D4F4);
}
</style>